import React, { useState, useEffect } from 'react';
import { ck_float, to_float, cline, uReal, useKForm, KInput, useHigh, GridTable, useCmd, WaitUmd, MainView, BtTxt, KFind, ck_empty,
    KSwitch, PanelTitle, Btn, loc } from 'sui';
import { TaskView } from './task/view';
import { useAccess } from 'cache';
import { PBox } from '../pair/pbox';
import { reload, load_tech } from './cmd';
import { User } from 'cache';

const PairView = () => {
    const [main, setMain] = useState();
    const [dw_lst, dwLst] = useState();
    const [high] = useHigh(252, 100);
    const [no_acc] = useAccess();
    const umd = useCmd();
    const form = useKForm();

    useEffect(() => {
        reload(null, setMain);
        load_tech(dwLst);
    }, []);

    const hreturn = () => {
        reload(null, setMain);
        umd.hreturn();
    };

    if (umd.isFin("task")) {
        return <TaskView cur={umd.cur} hreturn={hreturn}/>;
    }

    if (umd.isFin("pbox")) {
        return <PBox hreturn={() => umd.hreturn()} mod="rbox"/>;
    }

    const hCalc = () => {
        const ck = {
            tsn : v => ck_empty(v),
            bmin: v => ck_float(v),
            bmax: v => {
                const e = ck_float(v);
                if (e) {
                    return e;
                }

                const a = to_float(form.get("bmin"));
                const b = to_float(form.get("bmax"));

                if (b <= a) {
                    return loc("l_705");
                }

                return null;
            },
        };

        if (form.isErr(ck)) {
            return;
        }

        umd.startWait();

        const opt = {
            tsn: form.get("tsn"),
            bmin: to_float(form.get("bmin")),
            bmax: to_float(form.get("bmax")),
        };

        const pbox = form.get("pbox");
        if (pbox === "Y") {
            opt["pbox"] = true;
            opt["usn"] = User.userName();
        }

        uReal(null, "pair/rcalc",
            {
                line: cline(),
                ...opt,
            },
            r => reload(umd.endWait, setMain), e => umd.setErr(loc("l_704")), true);
    };

    const col = [
        {name: loc("l_193"), key: 'index', width: 70, frozen: true},
        {name: loc("l_238"), key: 'e_opt', width: 120, frozen: true, formatter: (props) => {
            const d = props.row;
            return (
                <div className="inline-flex">
                    <BtTxt hcmd={() => umd.pact(null, d, "task")}>{loc("l_706")}</BtTxt>
                </div>
            );
        }},
        {name: loc("l_363"), key: 'sn', width: 200},
        {name: loc("l_702"), key: 'pnum', width: 230},
    ];

    return (
        <MainView>
            <PanelTitle left={loc("l_822")} cl="gray">
                <div className="inline-flex mt-4 mb-2 items-center">
                    <Btn className="mr-4" hcmd={hCalc} disabled={no_acc("ma")}>{loc("l_701")}</Btn>
                    <KFind label={loc("l_694")} form={form} name="tsn" margin="dense" width="w-56" list={dw_lst}/>
                    <div className="inline-flex items-center px-2 ml-8 border-blue-600 border">
                        <span className="text-base mr-4 mt-1">{loc("l_743")}</span>
                        <KInput label={loc("l_696")} form={form} name="bmin" mg="dense" width="w-32"/>
                        <KInput label={loc("l_646")} form={form} name="bmax" mg="dense" width="w-32" className="ml-2"/>
                    </div>
                    <KSwitch form={form} name="pbox" className="ml-2">{loc("l_799")}</KSwitch>
                    <Btn className="ml-4" disabled={form.get("pbox") !== "Y"} hcmd={() => umd.pact(null, null, "pbox")}>{loc("l_800")}</Btn>
                </div>
            </PanelTitle>
            <GridTable col={col} row={main} high={high}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {PairView};
